<template>
    <div class="page page-progress-bar">
        <h2>线型进度条</h2>
        <div class="attributes">
            <h2>API</h2>
            <table>
                <tr><th>参数</th><th>说明</th><th>类型</th><th>可选</th><th>默认</th></tr>
                <tr><td>percentage</td><td>进度条百分比<br>例如:20</td><td>Number</td><td>-</td><td>必选</td></tr>
                <tr><td>barHeight</td><td>进度条高度<br>1倍UI图px值</td><td>Number</td><td>-</td><td>6</td></tr>
                <tr><td>outerBackColor</td><td>进度条底部颜色</td><td>String</td><td>-</td><td>#f2f2f4</td></tr>
                <tr><td>innerBackColor</td><td>进度条颜色</td><td>String</td><td>-</td><td>#20a0ff</td></tr>
                <tr><td>status</td><td>进度条状态</td><td>String</td><td>text<br>exception<br>success</td><td>text</td></tr>
                <tr><td>type</td><td>进度数据显示类型</td><td>String</td><td>outer<br>inner</td><td>outer</td></tr>
            </table>
        </div>
        <v-progress-bar
            :percentage = percentage
        ></v-progress-bar>
        <pre v-highlightjs @touchend.stop><code class="html">
            &lt;v-progress
                :percentage = percentage
            &gt;&lt;v-progress&gt;
        </code></pre>
        <v-progress-bar
            :percentage = percentage
            status = 'exception'
        ></v-progress-bar>
        <pre v-highlightjs @touchend.stop><code class="html">
            &lt;v-progress
                :percentage = percentage
                status = 'exception'
            &gt;&lt;v-progress&gt;
        </code></pre>
        <v-progress-bar
            :percentage = percentage
            status = 'success'
        ></v-progress-bar>
        <pre v-highlightjs @touchend.stop><code class="html">
            &lt;v-progress
                :percentage = percentage
                status = 'success'
            &gt;&lt;v-progress&gt;
        </code></pre>
        <v-progress-bar
            :percentage = percentage
            :barHeight = 30
            type = 'inner'
        ></v-progress-bar>
        <pre v-highlightjs @touchend.stop><code class="html">
            &lt;v-progress
                :percentage = percentage
                :barHeight = 30
                type = 'inner'
            &gt;&lt;v-progress&gt;
        </code></pre>
    </div>
</template>

<script>
    import vProgressBar from '../vendor/v-progress-bar';

    export default {
        components: { vProgressBar },

        name: 'page-progress',

        data () {
            return {
                percentage: 20,
                barHeight: 6,
                outerBackColor: '#000',
                innerBackColor: '#13ce66'
            };
        },

        mounted () {
            this.$logger.log('progress-bar.mounted... ');
        },

        activated () {
            this.$logger.log('progress-bar.activated... ');
        },

        deactivated () {
            this.$logger.log('progress-bar.deactivated... ');
        }
    };
</script>
<style lang="scss" rel="stylesheet/scss">
    @import "../scss/variables";
    @import "../scss/mixins";

    .page-progress-bar {
        background-color: #fff !important;
        padding-left: pxTorem(15px);
        padding-right: pxTorem(15px);
        .attributes {
            margin-bottom: pxTorem(10px);
        }
    }
</style>
